<%-- 
    Document   : index7
    Created on : 2015-9-24, 14:48:36
    Author     : Fire
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script src="plugins/react/react.js" type="text/javascript"></script>
        <script src="plugins/react/browser.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="example"></div>
        <script type="text/babel">//index7 和Index9 功能进行整合
            var MyComponent=React.createClass({
                getInitialState:function(){
                    return {value:'hello'};
                },
                handleClick:function(){
                    React.findDOMNode(this.refs.myTextInput).focus();
                },
                handleChange : function(event){
                    this.setState({value:event.target.value});
                },
                render:function(){
                    var value=this.state.value;
                    return(
                      <div>
                      <input type="text" ref="myTextInput" value={value}
                        onChange={this.handleChange}/>
                      <input type="button" value="focus the text input" 
                          onClick={this.handleClick}/>
                       <p>{value}</p>
                    </div>        
                    );
                }
            });
            
            React.render(
              <MyComponent/>,
                document.getElementById("example")
            );
        </script>
    </body>
</html>
